{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}
{% block head %}
<title>{{sysSettings.siteName}} - Subscriptions</title>

{% endblock %}

{% block body %}
<div class="container-fluid p-2" id="subscriptions-container">
    <div class="row m-2">
        <div class="index-video-title"><b>Subscriptions</b></div>
    </div>
    <div class="card m-2">
        <div class="card-header">
            <b>Channel Subscriptions</b>
        </div>
        <div class="card-body">
            <table class="table table-hover table-borderless">
                <thead>
                    <tr>
                        <th>
                            Channel Name
                        </th>
                        <th>
                            Streamer
                        </th>
                        <th>
                            Topic
                        </th>
                        <th>
                            Options
                        </th>
                    </tr>
                </thead>
                <tbody>
                {% for sub in channelSubList %}
                    <tr id="chanSub-{{sub.channel.id}}">
                        <td>
                            {{sub.channel.channelName}}
                        </td>
                        <td>
                            {{sub.channel.owner.username}}
                        </td>
                        <td>
                            {{sub.channel.topic | get_topicName}}
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger mb-2" onclick='deleteChannelSub("{{sub.channelID}}")'><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}

<script type="text/javascript" charset="utf-8">
  var conn_options = {
    'sync disconnect on unload': true
  };

  var socket = io();
</script>

<script>
function deleteChannelSub(chanID) {
    socket.emit('toggleChannelSubscription', { channelID: chanID });
    var row = document.getElementById('chanSub-' + chanID);
    row.parentNode.removeChild(row);
}
</script>

{% endblock %}